<template>
    <div class="content-box">
        <!-- 搜索地址 -->
        <div class="search-container">
            <div class="input-container">
                <el-form :model="myForm" ref="myForm" label-width="85px" class="my-el-form">
                    <el-form-item label="用户名称：" prop="userValue">
                        <el-input v-model="myForm.userValue" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="button-container">
                <el-button @click="handleReset('myForm')">重置</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handAdd">+ 新增</el-button>
            </div>
        </div>
        <!-- 展示表格 -->
        <div class="container">
            <div class="table-container">
                <el-table ref="Table1" :data="list" style="width: 100%" border>
                    <el-table-column label="用户姓名" align="center">
                        <template slot-scope="scope">{{ scope.row.userName }}</template>
                    </el-table-column>
                    <el-table-column label="登录账号" align="center">
                        <template slot-scope="scope">{{ scope.row.account }}</template>
                    </el-table-column>
                    <el-table-column label="用户角色" align="center">
                        <template slot-scope="scope">{{ scope.row.role == "MANAGER"?'管理员':'岗亭收费员' }}</template>
                    </el-table-column>
                    <el-table-column label="员工号" align="center">
                        <template slot-scope="scope">{{ scope.row.employeeNo }}</template>
                    </el-table-column>
                    <el-table-column label="联系电话" align="center">
                        <template slot-scope="scope">{{ scope.row.phone }}</template>
                    </el-table-column>
                    <el-table-column label="创建人" align="center">
                        <template slot-scope="scope">{{ scope.row.createBy }}</template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center">
                        <template slot-scope="scope">{{ scope.row.createTime }}</template>
                    </el-table-column>
                    <el-table-column label="启用状态" align="center">
                        <template slot-scope="scope">{{ scope.row.status == 'YES' ? '启用' : '禁用' }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pagination-area">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10, 20, 50]"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 新增弹框 -->
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="modalForm" :rules="modalRules" ref="modalForm">
                <el-form-item label="登录账号：" :label-width="formLabelWidth" prop="account">
                    <el-input v-model="modalForm.account" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名：" :label-width="formLabelWidth" prop="userName">
                    <el-input v-model="modalForm.userName" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                  <el-form-item label="用户角色："  :label-width="formLabelWidth" prop="role">
                    <el-select v-model="modalForm.role" placeholder="请选择">
                        <el-option label="管理员" value="MANAGER"></el-option>
                        <el-option label="岗亭收费员" value="SENTRY_BOX"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="modalForm.phone" autocomplete="off" placeholder="请输入" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="员工号：" :label-width="formLabelWidth" prop="employeeNo">
                    <el-input v-model="modalForm.employeeNo" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" :label-width="formLabelWidth" prop="email">
                    <el-input v-model="modalForm.email" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="登录密码：" :label-width="formLabelWidth" prop="password">
                    <el-input v-model="modalForm.password" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit('modalForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { userPageApi, saveUserApi, updUserApi, lookUserById } from '@/api/user';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 10
};
const userForm = {
    account: '',
    userName: '',
    phone: '',
    employeeNo: '',
    email: '',
    password: '',
    role:'MANAGER'
};
export default {
    data() {
        return {
            modalRules: {
                account: [{ required: true, message: '该项为必填项', trigger: 'blur' }],
                userName: [{ required: true, message: '该项为必填项' }],
                phone: [{ required: true, message: '该项为必填项' }],
                employeeNo: [{ required: true, message: '该项为必填项' }],
                email: [{ required: true, message: '该项为必填项' }],
                password: [{ required: true, message: '该项为必填项' }]
            },
            listQuery: Object.assign({}, defaultListQuery),
            list: [],
            total: 1,
            listLoading: true,
            myForm: {
                userValue: ''
            },
            dialogFormVisible: false, //新增弹框
            modalForm: Object.assign({}, userForm),
            formLabelWidth: '100px',
            
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async handleSubmit(modalForm) {
            //保存按钮
            this.$refs[modalForm].validate(async (valid) => {
                if (valid) {
                    const params = {
                        userId: this.modalForm.userId,
                        userName: this.modalForm.userName,
                        account: this.modalForm.account,
                        employeeNo: this.modalForm.employeeNo,
                        phone: this.modalForm.phone,
                        email: this.modalForm.email,
                        password: this.modalForm.password,
                        role: this.modalForm.role
                    };
                    const result = this.modalForm.userId ? await updUserApi(params) : await saveUserApi(params);

                    if (result.code == 200) {
                        this.$message.success('操作成功');
                        this.listQuery.pageNum = 1;
                        this.listQuery.pageSize = 20;
                        this.getList();
                    } else {
                        this.$message.info(result.msg);
                    }
                    this.dialogFormVisible = false;
                }
            });
        },
        handleUpdate(index, row) {
            // 编辑的时候回显
            this.modalForm = {
                account: row.account,
                userName: row.userName,
                phone: row.phone,
                employeeNo: row.employeeNo,
                email: row.email,
                userId:row.userId,
                role:row.role
            };
            this.dialogFormVisible = true;
        },
        handleSearch() {
            //搜索;
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handAdd() {
            //点击新增按钮，显示弹框

            this.dialogFormVisible = true;
            this.modalForm = Object.assign({}, userForm); //将内容设置为空
            this.$refs['modalForm'].resetFields();
        },
        handleReset(formName) {
            //重置选项
            this.$refs[formName].resetFields();
        },
        handleSizeChange(val) {
            // 改变列表显示条数
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // 改变列表显示页数
            this.listQuery.pageNum = val;
            this.getList();
        },

        getList() {
            // 获取数据列表
            this.listLoading = true;
            userPageApi(this.listQuery)
                .then((res) => {
                    this.listLoading = false;
                    this.list = res.data.records;
                    this.total = Number(res.data.total);
                })
                .catch((err) => {
                    this.listLoading = false;
                });
        }
    }
};
</script>
